<template>
  <!--上传附件-->
  <!-- :accept="accept.join(',')"-->
  <div class="bj">
    <div class="lineHeight">
      <span style="color: #ee0a24;"></span>当前位置拍照
    </div>
    <div style="padding: 0 8px;">
      <van-uploader
        :before-read="beforeRead"
        :after-read="afterRead"
        @delete="deleteFile"
        multiple
        :max-count="1"
        preview-size="70px"
        v-model="fileList"
      />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Uploader } from "vant";
import fileUploadFun from "@/api/fileUpload";
Vue.use(Uploader);

export default {
  name: "fileUpload",
  components: {
    [Uploader.name]: Uploader
  },
  data() {
    return {
      fileList: [],
      imgPath: "",
      oldImgName: "",
      doneFileList: [],
      formDataAll: null

    };
  },

  mounted() {

  },
  methods: {
    // 上传前验证，返回布尔值
    beforeRead(file) {
      console.log(file);
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        // Toast('请上传jpg/png格式的图片')
        this.$toast("请上传jpg/png格式的图片");
        return false
      }
      if (file.size > 1024*1024*10){
        this.$toast("请上传小于10M的图片");
        return false
      }
      return true;
    },

    //上传附件
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      if (file && file.length) {
        file.forEach(item => {
          this.doUpload(item);
        });
      } else {
        this.doUpload(file);
      }
    },
    doUpload(file) {
      file.status = "done";
      file.message = "上传成功";
      // console.log(this.fileList);
      this.uploadImgPath();
      // fileUploadFun.uploadFilesHy(formData).then(res => {
      //   // console.log(res.data);
      //   if (res.data.success) {
      //     file.status = "done";
      //     file.message = "上传成功";
      //     file.newname = res.data.result.newName;
      //   } else {
      //     file.status = "failed";
      //     file.message = "上传失败";
      //   }
      //   //重新整理imgPath
      //   this.uploadImgPath();
      // });

    },
    uploadImgPath() {
      //初始化
      this.imgPath = "";
      this.oldImgName = "";
      this.doneFileList = [];
      this.formDataAll = new FormData(); // 声明一个FormData对象
      //console.log(this.fileList);
      //获取fileList中上传成功的对象集合
      let isOKList = this.fileList.filter(item => {
        return item.status == "done";
      });
      isOKList.forEach(item => {
        // console.log(item);
        this.formDataAll.append("file", item.file);
      });
      // console.log(this.fileList);
      this.$emit("getFileList",this.fileList)
      // console.log(this.formDataAll);
      // console.log(this.formDataAll.get("file"));
      // let path = ".\\image\\";
      // isOKList.forEach(item => {
      //  // console.log(item);
      //   this.imgPath += item.newname + ",";
      //   this.oldImgName += item.file.name + ",";
      //   this.doneFileList.push({
      //     originalName: item.file.name, //附件原始名称 String 类型
      //     newName: item.newname //附件存放名称 String 类型
      //   });
      // });
      // this.imgPath = this.imgPath.substr(0, this.imgPath.length - 1);
      // this.oldImgName = this.oldImgName.substr(0, this.oldImgName.length - 1);
      // console.log(this.imgPath);
      //  console.log(this.doneFileList);
    },
    deleteFile(file) {
      this.uploadImgPath();
    },
    clear() {
      this.fileList = [];
      this.imgPath = "";
    },

  }
};
</script>
<style scoped>
.bj {
  padding: 12px 8px;
}

.bj .lineHeight {
  line-height: 20px;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0 8px;
  color: #646566;

}
</style>
